import React, { useEffect, useState } from "react"
import "./index.less"
import { Graph } from "@antv/x6/lib/graph";
import { Node } from "@antv/x6/lib/model/node";
import { Drawer, message } from 'antd';
import { getNodeUI } from "@/model/node-ui-select";
import { NoticeType } from "antd/lib/message/interface";
import DragModel from "@/components/DragModel";
import useGraph from "@/store/graph"
const image = {
  setting: "/icons/node-status/setting.png",
  success:
    '/icons/node-status/success.png',
  failed:
    '/icons/node-status/failed.png',
  running:
    '/icons/node-status/running.png',
}

const AlgoNode: React.ComponentType<{
  node: Node<Node.Properties>;
  graph: Graph;
}> = (props) => {
  const { node } = props
  const data = node?.getData()
  // const nodeStatus = data as NodeStatusPart
  // const { name, status = 'default' } = nodeStatus
  const { status = 'default' } = data
  const [nodeName, setNodeName] = useState<string>(data.name)
  const [open, setOpen] = useState<boolean>(false)
  const [openModal, setOpenModal] = useState<boolean>(false)
  const [messageApi, contextHolder] = message.useMessage();
  const openSetting = () => {
    setOpen(true)
  }
  const closeSetting = () => {
    setOpen(false);
    props.graph.unselect(node)
  };
  const updateSetting = (newSetting: Model.EmptyObj) => {
    // node.getData().setting = newSetting;
    node.getData().nodeConfig = newSetting;
  }
  const updateNodeDataInfo = (newDataProps?: Record<string, any>) => {
    if (!newDataProps) {
      return
    }
    for (let p in newDataProps) {
      if (newDataProps.hasOwnProperty(p)) {
        node.getData()[p] = newDataProps[p];
      }
    }
  }
  const { NodeUi, SpecificData } = getNodeUI(data.type);
  const openModalFn = () => {
    setOpenModal(true);
  };
  const closeModalFn = () => {
    setOpenModal(false);
    props.graph.unselect(node)
  }
  //获取节点可选节点
  let candidateNodes = undefined;
  if (data.type === 'judge') {
    candidateNodes = useGraph.getState().graph?.getCells().filter(cell => cell.isNode()).map(cell => cell.getData().name);
  }
  useEffect(() => {
    updateNodeDataInfo(SpecificData)
  }, [])
  return (
    <div className={`node ${status}`}>

      <img src={image.setting} alt="setting" onClick={openSetting} />
      <span className="label" onClick={openModalFn}>{nodeName}</span>
      <span className="status">
        {status === 'success' && <img src={image.success} alt="success" />}
        {status === 'failed' && <img src={image.failed} alt="failed" />}
        {status === 'running' && <img src={image.running} alt="running" />}
      </span>
      <Drawer title="节点设置" onClose={closeSetting} open={open} size="large">
        {contextHolder}
        <NodeUi
          setting={data.nodeConfig}
          updateSetting={updateSetting}
          messageTip={(msg: string, type: NoticeType) => {
            messageApi.open({
              type: type,
              content: msg,
              duration: 0.5
            });
          }}
          candidates={candidateNodes}
        ></NodeUi>
      </Drawer>
      <DragModel content={nodeName}
        title="修改节点名称"
        onConfirm={(_name) => {
          node.getData().name = _name
          setNodeName(_name);
        }
        }
        open={openModal}
        onClose={closeModalFn}
      ></DragModel>
    </div>
  )
}
export default AlgoNode
